// webpack它是运行在nodejs环境中的，所以它里面的配置写法使用commonjs规范
const { resolve } = require('path')
// 配置打包后生成访问html模板文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 在下次打包时主动删除上一次的打包目录
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 把scss提取成单个的css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 复制静态资源到指定的目录
const CopyPlugin = require('copy-webpack-plugin')


module.exports = {
  // source-map 方便在【开发时】，定位源代码的位置 
  devtool: 'source-map',
  // 指定打包编译的模式 development【开发】|production【生产】
  mode: 'development',
  // 指定打包入口文件 默认找的是src/index.js文件，可以修改
  // 字符串 | 数组  |  对象
  entry: './src/main.js',
  // entry: './src/index.ts',
  // 打包出口
  output: {
    // 绝对路径
    path: resolve('./dist'),
    // 打包生成后的主访问文件
    filename: 'main.js'
  },
  // 加载器 -- 扩展webpack打包的能力
  module: {
    // 匹配的规则，扩展名，正则
    rules: [
      // .css打包处理
      {
        test: /\.css$/i,
        // use数组，如果在一行，从右向左，如果是多行，从下向上 执行顺序
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader', options: {} }
        ]
      },
      // scss处理
      {
        test: /\.scss$/,
        // 执行顺序   从右到边，从下到上  
        use: [
          // 简单写
          // { loader: "style-loader" },
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
        ]
      },
      // .art打包处理
      {
        test: /\.art$/i,
        loader: "art-template-loader"
      },
      // 图片处理
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 图片小于1kb，就会被base64处理  减少一次http请求
              // 优点: 减少请求数量(减轻服务器压力)
              // 缺点：图片体积会更大(文件请求速度更慢)
              limit: 1 * 1024,
              // 打包后的路径和文件名称 [ext]扩展名
              name: 'img/[name].[ext]',
              // 打包后的文件指定访问路径前缀
              publicPath: '/'
            }
          }
        ]
      },
      {
        test: /\.js$/i,
        // 排除不去处理的目录
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.ts$/i,
        // 排除不去处理的目录
        exclude: /node_modules/,
        loader: 'ts-loader'
      }
    ]
  },
  // 插件
  plugins: [
    new CleanWebpackPlugin(),
    new CopyPlugin({
      patterns: [
        {
          // 绝对地址
          // 源
          from: resolve('./public/favicon.ico'),
          // 目标 文件无需写对应的文件名称，如果你写了，表示复制并重命名
          to: resolve('./dist')
        }
      ]
    }),
    new MiniCssExtractPlugin({
      filename: 'css/main.css'
    }),
    new HtmlWebpackPlugin({
      // 指定模板路径
      template: resolve('./public/index.html'),
      favicon: './public/favicon.ico'
    })
  ],
  resolve: {
    // 路径别名，可以设置N多个
    alias: {
      // key在导入时用的名称
      // value绝对地址，它指定的真实的路径
      '@': resolve('./src'),
      '$v': resolve('./src/views'),
    },
    // 导入模块时，可以省略的后缀名
    extensions: ['.js', '.art']
  },
  // 开发模式 -- devServer它内置express,它就是express服务
  devServer: {
    port: 3000,
    // 编译进程
    progress: true,
    // 自动打开浏览器 true自动打开， false不自动打开
    open: false,
    // quiet: true,
    // devServer中可以写代理配置
    proxy: {
      // 一旦devServer服务器接受到 /api开头的请求，就会把请求转发到另一个服务器
      '/api': {
        target: 'http://localhost:9000',
        changeOrigin: true,
        pathRewrite: {
        }
      }
    }
  }

}
